<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Book Store</title>
<link rel="stylesheet" type="text/css" href="${path }/style/style.css" />
	
	<script>
		onload = registerUser;
	
		function registerUser(param){
			var flag = true;
			var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
			//alert(222);
			var uname = document.getElementById("username");
			var upass = document.getElementById("password");
			var email = document.getElementById("email");
			var corparate = document.getElementById("corparate");
			var address = document.getElementById("address");
			var tel = document.getElementById("tel");
			
			checkData(uname,"用户名必须是五位",function(val){
				if(val != null && val.length == 5){
					
					
					return true;
				}else {
					flag = false;
					return false;
				}
			},param);
			
			checkData(upass,"密码必须是六位",function(val){
				if(val != null && val.length == 6){
					return true;
				}else {
					flag = false;
					return false;
				}
			},param);
			
			checkData(upass,"密码必须是六位",function(val){
				if(val != null && val.length == 6){
					return true;
				}else {
					flag = false;
					return false;
				}
			},param);
			
			checkData(email,"必须符合邮箱规则",function(val){
				if(myreg.test(val)){
					return true;
				}else {
					flag = false;
					return false;
				}
			},param);
			
			checkData(corparate,"公司不能为空",function(val){
				if(!/^\s*$/.test(val)){
					return true;
				}else {
					flag = false;
					return false;
				}
			},param);
			
			checkData(address,"地址不能为空",function(val){
				if(!/^\s*$/.test(val)){
					return true;
				}else {
					flag = false;
					return false;
				}
			},param);
			
			checkData(tel,"必须符合手机号规则",function(val){
				if(/^1[3|4|5|7|8]\d{9}$/.test(val)){
					return true;
				}else {
					flag = false;
					return false;
				}
			},param);
			
			return flag;
		}
		
		function checkData(obj,info,fun,param){
			var nameSpan = getSpan(obj);
			obj.onfocus = function(){
				nameSpan.className = "state2";
				nameSpan.innerHTML=info;//"用户名必须是五位";
			}
			
			obj.onblur = function(){
				
				var value = obj.value;
				if(fun(value)){
					if(obj.name=='username'){
						/* var f = validateName(value);
						if(f){
							nameSpan.className = "state3";
							nameSpan.innerHTML="用户名可用";
						}else{
							nameSpan.className = "state4";
							nameSpan.innerHTML="用户名已经被注册";	
						}	 */
						var xmlHttp = new XMLHttpRequest();
						var url = "${path }/user/validateName?uname="+value;
						xmlHttp.open("get",url,true);
						
						xmlHttp.send();
						
						xmlHttp.onreadystatechange = function(){
							if(xmlHttp.status == 200){
								if(xmlHttp.readyState == 4){
									var s = xmlHttp.responseText;
									//alert(22222);
									if(s == '1'){
										nameSpan.className = "state4";
										nameSpan.innerHTML="用户名已经被注册";
									}else {
										nameSpan.className = "state3";
										nameSpan.innerHTML="用户名可用";
									}
									
									//alert(flag+"============");
								}
							}
						}
					}else {
						nameSpan.className = "state3";
						nameSpan.innerHTML="OK";
					}
					
				}else {
					nameSpan.className = "state4";
					nameSpan.innerHTML=info;//"用户名必须是五位";
				}
			}
			
			if(param == 'p'){
				obj.onblur();
			}
		}
		
		function getSpan(obj){
			while(true){
				if(obj.previousSibling.nodeName != "SPAN"){
					obj = obj.previousSibling;
				}else {
					return obj.previousSibling;
				}
			}
		}
		
		function validateName(name){
			var flag = true;
			var xmlHttp = new XMLHttpRequest();
			var url = "${path }/user/validateName?uname="+name;
			xmlHttp.open("get",url,false);
			
			xmlHttp.send();
			
			xmlHttp.onreadystatechange = function(){
				if(xmlHttp.status == 200){
					if(xmlHttp.readyState == 4){
						var s = xmlHttp.responseText;
						//alert(22222);
						if(s == '1'){
							flag = false;
						}
						
						//alert(flag+"============");
					}
				}
			}
			//alert(flag+"----------------");
			return flag;
		}
	</script>
	<style>
		.state1{
			color:#CCC;
			font-size: 9pt;
		}
		.state2{
			color:#000;
			font-size: 9pt;
		}
		.state3{
			color:green;
			font-size: 9pt;
		}
		
		.state4{
			color:red;
			font-size: 9pt;
		}
	</style>
</head>
<body>
<div id="wrap">

       <%@ include file="../common/header.jsp" %>
       
       
       <div class="center_content">
       	<div class="left_content">
            <div class="title"><span class="title_icon"><img src="${path }/images/bullet1.gif" alt="" title="" /></span>用户注册</div>
        
        	<div class="feat_prod_box_details">
            <p class="details">
             本书店是天创集团旗下的天智教育经营的书店，开业十年来，一直与国内外五百家出版社，近千家发行单位保持着良好的合作关系。以其集文化传播、艺术鉴赏、休闲为一体的崭新经营方式、一流的购书环境及优质的服务，赢得了众多的荣誉，成为华东地区最大的集图书、音像制品、文化用品、快餐、软件开发、广告策划于一体的图书零售企业。
            </p>
            
              	<div class="contact_form">
                <div class="form_subtitle">创建新用户</div>
                 <form name="register" action="${path }/user/register" method="post" onsubmit="return registerUser('p')">          
                    <div class="form_row">
                    <label class="contact"><strong>用户名:</strong></label>
                    <span class="state1">用户名必须是五位</span>
                    <input type="text" id="username" name="username" class="contact_input" />
                    </div>  


                    <div class="form_row">
                    <label class="contact"><strong>密码:</strong></label>
                    <span class="state1">密码必须是六位</span>
                    <input type="password" id="password" name="password" class="contact_input" />
                    </div> 

                    <div class="form_row">
                    <label class="contact"><strong>邮箱:</strong></label>
                    <span class="state1">必须符合邮箱规则</span>
                    <input type="text" name="email" id="email" class="contact_input" />
                    </div>


                    <div class="form_row">
                    <label class="contact"><strong>电话:</strong></label>
                   	<span class="state1">必须符合手机号规则</span>
                    <input type="text" name="tel" id="tel" class="contact_input" />
                    </div>
                    
                    <div class="form_row">
                    <label class="contact"><strong>公司:</strong></label>
                    <span class="state1">公司不能为空</span>
                    <input type="text" id="corparate" name="corparate" class="contact_input" />
                    </div>
                    
                    <div class="form_row">
                    <label class="contact"><strong>地址:</strong></label>
                    <span class="state1">地址不能为空</span>
                    <input type="text" id="address" name="address" class="contact_input" />
                    </div>                    

                    <div class="form_row">
                        <div class="terms">
                        <input type="checkbox" name="terms" />
                        我同意 <a href="#">terms &amp; conditions</a>                        </div>
                    </div> 

                    
                    <div class="form_row">
                    <input type="submit" class="register" value="注册" />
                    </div>   
                  </form>     
                </div>  
            
          </div>	
            
              

            

            
        <div class="clear"></div>
        </div><!--end of left content-->
        
        <div class="right_content">
        
                	<div class="languages_box">
            <span class="red">Languages:</span>
            <a href="#"><img src="${path }/images/gb.gif" alt="" title="" border="0" /></a>
            <a href="#"><img src="${path }/images/fr.gif" alt="" title="" border="0" /></a>
            <a href="#"><img src="${path }/images/de.gif" alt="" title="" border="0" /></a>
            </div>
                <div class="currency">
                <span class="red">Currency: </span>
                <a href="#">GBP</a>
                <a href="#">EUR</a>
                <a href="#"><strong>USD</strong></a>
                </div>
                
                
              <div class="cart">
                  <div class="title"><span class="title_icon"><img src="${path }/images/cart.gif" alt="" title="" /></span>我的购物车</div>
                  <div class="home_cart_content">
                  3个商品 | <span class="red">总计: 100元</span>
                  </div>
                  <a href="${path }/jsp/cart/cart.jsp" class="view_cart">查看购物车</a>
              
              </div>
        
             <div class="title"><span class="title_icon"><img src="${path }/images/bullet3.gif" alt="" title="" /></span>关于我们店</div> 
             <div class="about">
             <p>
             <img src="${path }/images/about.gif" alt="" title="" class="right" />
             本书店是天创集团旗下的天智教育经营的书店，开业十年来，一直与国内外五百家出版社，近千家发行单位保持着良好的合作关系。以其集文化传播、艺术鉴赏、休闲为一体的崭新经营方式、一流的购书环境及优质的服务，赢得了众多的荣誉，成为华东地区最大的集图书、音像制品、文化用品、快餐、软件开发、广告策划于一体的图书零售企业。
             </p>
             
             </div>
             
  <div class="right_box">
           <div class="title"><span class="title_icon"><img src="${path }/images/bullet4.gif" alt="" title="" /></span>推荐图书</div> 
           <c:forEach var="t" items="${tuijianBook.books }">
           <div class="new_prod_box">
               <a href="javascript:void(0)" onclick="detailsBook('${t.bookId}')">${t.bookName }</a>
               <div class="new_prod_bg">
               <span class="new_icon"><img src="${path }/images/promo_icon.gif" alt="" title="" /></span>
               <a href="javascript:void(0)" onclick="detailsBook('${t.bookId}')"><img  src="${path }/images/${t.imgUrl }" style="width:60px;height:90px" alt="" title="" class="thumb" border="0" /></a>
               </div>           
           </div>
           </c:forEach>         
      </div>
             
             <div class="right_box">
             
             	<div class="title"><span class="title_icon"><img src="${path }/images/bullet5.gif" alt="" title="" /></span>图书分类</div> 
                
                <ul class="list">
                <li><a href="#">accesories</a></li>
                <li><a href="#">books gifts</a></li>
                <li><a href="#">specials</a></li>
                <li><a href="#">hollidays gifts</a></li>
                <li><a href="#">accesories</a></li>
                <li><a href="#">books gifts</a></li>
                <li><a href="#">specials</a></li>
                <li><a href="#">hollidays gifts</a></li>
                <li><a href="#">accesories</a></li>
                <li><a href="#">books gifts</a></li>
                <li><a href="#">specials</a></li>                                              
                </ul>
                
             	<div class="title"><span class="title_icon"><img src="${path }/images/bullet6.gif" alt="" title="" /></span>合作伙伴</div> 
                
                <ul class="list">
                <li><a href="#">accesories</a></li>
                <li><a href="#">books gifts</a></li>
                <li><a href="#">specials</a></li>
                <li><a href="#">hollidays gifts</a></li>
                <li><a href="#">accesories</a></li>
                <li><a href="#">books gifts</a></li>
                <li><a href="#">specials</a></li>
                <li><a href="#">hollidays gifts</a></li>
                <li><a href="#">accesories</a></li>                              
                </ul>      
             
             </div>         
             
        
        </div><!--end of right content-->
        
        
       
       
       <div class="clear"></div>
       </div><!--end of center content-->
       
              
      <%@ include file="../common/foot.jsp" %>
    

</div>

</body>
</html>